<template>
  <el-dialog
    v-model="visible"
    title="上传图片"
    destroy-on-close
    @close="closeFn"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      status-icon
    >
      <el-form-item label="上传图片" prop="file">
        <el-upload
          action="#"
          drag
          accept=".jpg, .png"
          :auto-upload="false"
          :show-file-list="true"
          :on-change="onChange"
          list-type="picture-card"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>

      <el-form-item label="是否买卖" prop="isBuy">
        <el-switch v-model="form.isBuy" />
      </el-form-item>
    </el-form>
    <div></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="importExcel"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script type="link">
import { upload } from '@/api/content.js'

export default {
  components: {
  },
  data () {
    return {
      visible: false,
      form: {
        isBuy: false,
        file: ''
      },
      rules: {
      },
      fileList: []
    };
  },
  mounted () {
  },
  methods: {
    // 显示弹窗
    showFn () {
      this.visible = true
    },
    // 关闭弹窗
    closeFn () {
      Object.assign(this.$data, this.$options.data())
    },
    // 上传图片变化事件
    onChange (file, fileList) {
      this.fileList = [fileList[fileList.length - 1]]
      this.form.file = file.raw
    },
    // 移除图片
    handleRemove () {
      this.form.file = ''
    },
    // 上传图片
    importExcel () {
      const param = new FormData()
      const userId = sessionStorage.getItem('userId')
      param.append('file', this.form.file)
      param.append('userId', userId)
      param.append('isBuy', this.form.isBuy)
      console.log(param)
      upload(param).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
          this.$emit('search')
          this.visible = false
        }
      })
    }

  }
};
</script>

<style scoped>
.unLoad {
  width: 1200px;
  margin: auto;
}
</style>
